*{
    margin: 0;
    padding: 0;
}
#div1{
    width: 200px;
    height: 200px;

    background: #0cc;
    text-align: center;
    line-height: 200px;
    margin: 150px;

    transition: all 1s;

}

#div1:hover{
    transform-origin: top left; /* 设置变换原点 */
    transform: rotate(360deg);/* 旋转度数 */
    
}

#div2{
    width: 200px;
    height: 200px;

    background: #0cc;
    text-align: center;
    line-height: 200px;
    margin: 150px;

    transition: all 1s;
}

#div2:hover{
    transform: scale(2,2);/* 放大倍数 */
}


#div3{
    width: 200px;
    height: 200px;

    background: #0cc;
    border: 2px solid red;
    text-align: center;
    line-height: 200px;
    margin: 150px;

    perspective: 300px;/* 远近度 */
    /* transition: all 1s; */

}

#div3 img{
    width: 200px;
    height: 200px;
    display: block;
    transition: all 3s;
}
#div3:hover img{
    transform: rotateY(360deg);
}